<template>
	<view class="order-list">

		<view class='list-box' :style="'height:'+( windowHeight)  + 'px'">
			<scroll-view :style="'height: '+(windowHeight-90) + 'px;'" scroll-y="true" class="scroll-Y">
				<view style=" height: 100%;">
					<view class="list-item">
						<view class="list-cell">
							<image class="img" mode="aspectFill"
								:src="products.imgUrl||'https://dnsverify.pfmoto.com/appstatic/img/my/appoint_img_small.png'" />
							<view class="list-content_text" style="width: 426rpx;">
								<view class="layout-1" style="justify-content: space-between;">
									<text class="text-5"
										style="width: 300rpx;text-align: left;">{{products.productName}}</text>
									<text class="text-5">X{{products.count}}</text>
								</view>
								<view class="layout-1" style="margin-top: 4px;">
									<text class="text-1">{{products.attValues}}</text>
								</view>
								<view class="layout-1" style="margin-top: 4px;justify-content:flex-end;">
									<text class="text-3" style="margin-top: 4px;"
										v-if="products.payType=='3'">￥{{products.mixturePrice}}+{{products.mixturePoint}}分</text>
									<text class="text-3" style="margin-top: 4px;"
										v-else-if="products.payType=='2'">{{products.point}}分</text>
									<text class="text-3" style="margin-top: 4px;" v-else>￥{{products.price}}</text>
								</view>
								<view class="layout-1" style="margin-top: 4px;justify-content:flex-end;">
									<text class="text-5" style='margin-right: 10px;'>实付</text>
									<text class="text-3" v-if="products.payType=='1'">￥{{products.finalPrice}}</text>
									<text class="text-3"
										v-else-if="products.payType=='2'">{{products.finalPoint}}分</text>
									<text class="text-3"
										v-else>￥{{products.finalDiscountMixturePrice}}+{{products.finalDiscountMixturePoint}}分</text>
								</view>

							</view>
						</view>

						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-7">退款方式</view>
							<view class="text-8" v-if="orderApply.cancelType==0">仅退款</view>
							<view class="text-8" v-else-if="orderApply.cancelType==1">退货退款</view>
						</view>
						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-7">退货原因</view>
							<view class="text-8">{{orderApply.cancelReason}}</view>
						</view>

						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-7">退货数量</view>
							<view class="text-8">{{orderApply.cancelNum}}</view>
						</view>
						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-7">退款金额</view>
							<view class="text-8">￥{{orderApply.cancelPrice}}</view>
						</view>
						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-7">退还积分</view>
							<view class="text-8">{{orderApply.cancelScore}}</view>
						</view>
						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-7">快递单号</view>
							<view class="text-8" v-if="orderApply.cancelFreightNo">{{orderApply.cancelFreightNo}}</view>
							<view class="text-8" v-else>-</view>
						</view>

						<view class="info-transverse" style="height: 70rpx;">
							<view class="text-8">{{orderApply.cancelDesc}}</view>
						</view>

						<view class="info-transverse" style="justify-content: start;height: 60px;margin-bottom: 32rpx;"
							v-if="imgUrls&&imgUrls.length>0">
							<block v-for="(item, index) in imgUrls" :key="index">
								<u--image :showLoading="true" :src="item.imgUrl" width="56px" height="56px"
									style='margin-right: 10px;' @click="previewImg( index)"></u--image>
							</block>
						</view>
						<view style=" margin-bottom: 32rpx;" v-else> </view>
					</view>

					<view class="list-item" style="margin-top: 28rpx;" v-if="statusMap.applyIsShow==true">
						<view class="line-view" style="margin-top: 32rpx;margin-bottom: 32rpx;">
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="statusMap.applyRefund==true?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
							<view :class="statusMap.applyReview==true?'line_success':'line'"></view>
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="statusMap.applyReview==true?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
							<view :class="statusMap.applySuccess==true?'line_success':'line'"></view>
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="statusMap.applySuccess==true?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
						</view>
						<view class="line-view" style="justify-content: space-around;margin-bottom: 32rpx;">
							<view class="line-text-view">
								<view :class="statusMap.applyRefund==true?'text-line-1':'text-line-2'">提交退款</view>
								<view class="text-line-3" v-if="statusMap.applyRefundTime">{{statusMap.applyRefundTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
							<view class="line-text-view" style=" width: 220rpx;">
								<view :class="statusMap.applyReview==true?'text-line-1':'text-line-2'"
									style=" width: 220rpx;">平台审核通过</view>
								<view class="text-line-3" v-if="statusMap.applyReviewTime">{{statusMap.applyReviewTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
							<view class="line-text-view">
								<view :class="statusMap.applySuccess==true?'text-line-1':'text-line-2'">退款</view>
								<view class="text-line-3" v-if="statusMap.applySuccessTime">
									{{statusMap.applySuccessTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
						</view>
					</view>
					<view class="list-item" style="margin-top: 28rpx;" v-else>
						<view class="line-view" style="margin-top: 32rpx;margin-bottom: 32rpx;">
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="statusMap.applyRefund==true?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>
							<view :class="statusMap.applyCancel==true?'line_success':'line'" style="width: 165px;">
							</view>
							<image :showLoading="true" style="width: 10px;height: 10px;"
								:src="statusMap.applyCancel==true?'https://dnsverify.pfmoto.com/appstatic/mall/mall_orange_point.png':'https://dnsverify.pfmoto.com/appstatic/mall/mall_grey_point.png'">
							</image>

						</view>
						<view class="line-view" style="justify-content: space-around;margin-bottom: 32rpx;">
							<view class="line-text-view">
								<view :class="statusMap.applyRefund==true?'text-line-1':'text-line-2'">提交退款</view>
								<view class="text-line-3" v-if="statusMap.applyRefundTime">{{statusMap.applyRefundTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
							<view class="line-text-view">
								<view :class="statusMap.applyCancel==true?'text-line-1':'text-line-2'">取消退款</view>
								<view class="text-line-3" v-if="statusMap.applyCancelTime">{{statusMap.applyCancelTime}}
								</view>
								<view class="text-line-3" v-else style="visibility: hidden;">2000/01/01 00:00:00
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<block v-if="statusMap.applyIsShow==true">
				<!-- 平台审核未通过时可以 取消申请 -->
				<view class="cancelBtns"
					v-if="statusMap.applyRefund==true&&statusMap.applyReview==false&&statusMap.applySuccess==false&&!statusMap.applyReviewTime">
					<text class="cancelblackBtn" @click="showOrderCancelApplication=true">取消申请</text>
				</view>
				<!-- 平台审核通过 -->
				<view class="cancelBtns"
					v-if="statusMap.applyReview==true&&statusMap.applySuccess==false&&statusMap.applyReviewTime&&!statusMap.applySuccessTime">
					<text class="cancelblackBtn" @click="showReturnPolicy=true"
						v-if="orderApply.cancelType==0||orderApply.cancelType==1&&orderApply.cancelFreightNo">退货说明</text>
					<block v-else>
						<text class="cancelblackBtn" style="margin-right: 16rpx;"
							@click="showReturnPolicy=true">退货说明</text>
						<!-- 平台审核通过、退货方式是退货退款，退款未成功 -->
						<text class="cancelblackBtn" style="margin-left: 16rpx;" @click="addExpress">维护快递单号</text>
					</block>
				</view>

				<!-- 退款 -->
				<view class="cancelBtns" v-if="statusMap.applySuccess==true&&(products.count-refundNum)>0">
					<text class="cancelblackBtn"
						@click="orderRefundApplication(products,products.count-refundNum)">继续退款</text>
				</view>
			</block>




		</view>
		<!-- 取消订单弹窗 -->
		<u-modal :show="showOrderCancelApplication" :content='showOrderCancelContent'
			:confirmText='showOrderCancelConfirmText' confirmColor='#EA5404' @confirm='orderCancelApplication'
			:showCancelButton='true' @cancel='showOrderCancelApplication=false'></u-modal>
		<!-- 退货说明弹窗 -->
		<u-modal :show="showReturnPolicy" :content='returnPolicyContent' :confirmText='returnPolicyText'
			confirmColor='#EA5404' @confirm='showReturnPolicy=false'></u-modal>


		<!-- 维护快递单号弹窗 -->
		<u-modal :show="showExpressView" title="维护快递单号" :showCancelButton='true' @cancel='cancelAddExpress'
			@confirm='confirmAddExpress' confirmColor='#EA5404'>
			<view class="slot-content">
				<view class="info-transverse" style="width: 550rpx;" @click="showCompanyPicker=true">
					<view class="text-1" style="text-align: left;" v-if="freightCompany==''">请选择快递公司</view>
					<view class="text-1" style="text-align: left;" v-else>{{freightCompany}}</view>
					<u-icon name="arrow-down" color="#ADB0AE" size="15"></u-icon>
				</view>

				<u-line></u-line>
				<view class="info-transverse" style="width: 550rpx;">
					<input class="text-1" type="text" value='freightNo' v-model='freightNo' data-type='freightNo'
						maxlength="20" placeholder="请输入快递单号" placeholder-style="color:#ADB0AE" auto-height />
				</view>
			</view>
		</u-modal>

		<u-picker :show='showCompanyPicker' :columns="companyList" keyName="contentName" @cancel="cancelPicker"
			@confirm="confirmPicker" confirmColor='#EA5404'>
		</u-picker>

	</view>



</template>
<script>
	const app = getApp();
	const util = require('@/utils/util.js');
	const network = require('@/manager/network-manager.js');
	export default {
		data() {
			return {
				windowHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight,
				navigationBarHeight: app.globalData.navigationBarHeight,
				contentHeight: app.globalData.windowHeight - 100,
				itemId: '',
				products: {
					"imgUrl": null,
					"productName": null,
					"count": null,
					"attValues": null,
					"mixturePrice": null,
					"mixturePoint": null,
					"discountMixturePrice": null,
					"discountMixturePoint": null,
					"discountPrice": null,
					"discountPoint": null,
					"finalDiscountMixturePrice": null,
					"finalDiscountMixturePoint": null,
					"finalPoint": null,
					"finalPrice": null,
					"point": null,
					"price": null,
					"payType": null
				},
				orderApply: {
					"id": null,
					"cancelFreightNo": null,
					"cancelScore": null,
					"cancelPrice": null,
					"cancelNum": null,
					"cancelType": null,
					"cancelReason": null,
					"cancelDesc": null,
					"refundTime": null,
					"cancelTime": null,
				},
				statusMap: {
					"applyRefund": true,
					"applyCancel": false,
					"applyReview": false,
					"applyIsShow": true,
					"applyRefundTime": null,
					"applySuccess": false
				},
				refundNum: 0,
				showOrderCancelApplication: false,
				showOrderCancelContent: '是否取消申请',
				showOrderCancelConfirmText: '确定',
				showReturnPolicy: false,
				returnPolicyContent: '',
				returnPolicyText: '关闭',
				imgUrls: [],
				companyList: [],
				showCompanyPicker: false,
				showExpressView: false,
				freightCompany: '',
				freightNo: '',
				from: '',
				id: ''




			}
		},
		onLoad: function(options) {
			this.itemId = options.itemId
			if (options.from) {
				this.from = options.from
			}
			// this.appRefundqueryLastDetail()
			this.getCompanyList()

			//更新已读
			if ((options.from1 == "message" || options.from1 == "notice") && options.myId) {
				this.update2Read(options.myId, options.from1);
			}
		},
		onShow() {
			this.appRefundqueryLastDetail()
		},

		methods: {
			//更新已读
			update2Read: function(myId, from1) {
				//debugger
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;
				var params = {
					"id": myId,
					"isType": 2
				};
				network.post(uri, params, 'json').then(res => {
					//debugger
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						if (from1 == 'message') {
							//回调上一个页面
							let pages = getCurrentPages();
							if (pages.length == 3) {
								let prePage = pages[pages.length - 2];
								let preprePage = pages[pages.length - 3]
								// #ifdef H5
								prePage.refresh(myId);
								preprePage.refresh();
								// #endif
								// #ifdef APP-PLUS
								prePage.$vm.refresh(myId);
								preprePage.$vm.refresh();
								// #endif
							}
						} else {
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh(myId);
							// #endif
							// #ifdef APP-PLUS
							prePage.$vm.refresh(myId);
							// #endif
						}

						util.syncBadge(getApp())
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//一件一件商品退款
			orderRefundApplication: function(item, refundableNum) {
				var pfMallOrderProductsItemList = []
				pfMallOrderProductsItemList.push(item)
				var pfMallOrderProductsItemListJson = JSON.stringify(pfMallOrderProductsItemList)
				uni.navigateTo({
					url: '/module_my/pages/mallDetail/mallCancelDetail?currentStatus=' + this.currentStatus +
						'&orderNo=' + this
						.orderNo + '&pfMallOrderProductsItemListJson=' + pfMallOrderProductsItemListJson +
						'&from=continue&refundableNum=' + refundableNum
				})
			},
			//取消退款申请
			orderCancelApplication: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_PRODUCT_PFMALLORDERCANCELAPPLY_ORDERCANCELAPPLICATION;
				var params = {
					"id": that.orderApply.id
				};
				network.post(uri, params, 'json', null, true).then(res => {
					if (res.code == 200) {
						that.showOrderCancelApplication = false
						uni.navigateBack({
							delta: 1
						})

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},

			//App商品最新退款中查看详情
			appRefundqueryLastDetail: function() {
				var that = this;
				var flag = 1
				if (this.from == '售后') {
					flag = 2
				}
				var uri = app.globalData.config.interfaces.URL_PRODUCT_PFMALLORDERCANCELAPPLY_APPREFUNDQUERYDETAIL;
				var params = {
					"itemId": that.itemId,
					"flag": flag
				};
				network.get(uri, params, 'json', null, true).then(res => {
					if (res.code == 200) {
						that.id = res.data.pfMallOrderCancelApply.id
						that.products = res.data.pfMallOrderProductsItemCancel
						that.orderApply = res.data.pfMallOrderCancelApply
						that.imgUrls = res.data.imgUrls
						that.statusMap = res.data.statusMap
						that.refundNum = res.data.refundNum
						that.returnPolicyContent = res.data.returnPolicy

						//假数据
						// that.statusMap.applyReview = true
						// that.statusMap.applySuccess = true


					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//展示快递单号弹窗
			addExpress: function() {
				this.showExpressView = true
			},
			//取消填写快递单号
			cancelAddExpress: function() {
				this.showExpressView = false
				this.freightCompany = ''
				this.freightNo = ''
			},
			//确定填写快递单号
			confirmAddExpress: function() {
				var that = this
				if (that.freightCompany == '') {
					uni.showToast({
						title: '请选择发货公司',
						duration: 3000,
						icon: 'none'
					})
				} else if (that.freightNo == '') {
					uni.showToast({
						title: '请填写快递单号',
						duration: 3000,
						icon: 'none'
					})
				} else {
					that.sendOutGoodsFreight()
				}
			},
			//快递公司名称列表
			getCompanyList: function() {
				var that = this
				var url = app.globalData.config.interfaces.URL_DICTIONARY_GETDICTIONARYLIST
				var params = {
					dictionaryCode: 'FREIGHT_COMPANY'
				};
				network.get(url, params, 'json').then(res => {
					if (res.code == 200) {
						that.companyList = [res.data]
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});

			},
			//确定
			confirmPicker(e) {
				// 退款/取消原因
				if (this.showCompanyPicker == true) {
					this.showCompanyPicker = false
					this.freightCompany = e.value[0].contentName
				}
			},
			//取消
			cancelPicker(e) {
				// 退款/取消原因
				if (this.showCompanyPicker == true) {
					this.showCompanyPicker = false
				}
			},

			// 维护快递单号
			sendOutGoodsFreight: function() {
				var that = this
				var url = app.globalData.config.interfaces.URL_PRODUCT_PFMALLORDERCANCELAPPLY_MAINTAINEXPRESSNUM
				var params = {
					expressCompanyName: that.freightCompany,
					cancelFreightNo: that.freightNo,
					id: that.id
				};
				network.post(url, params, 'json', null, true).then(res => {

					if (res.code == 200) {
						debugger
						that.showExpressView = false
						that.freightCompany = ''
						that.freightNo = ''
						that.appRefundqueryLastDetail()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
						that.showExpressView = false
						this.freightCompany = ''
						this.freightNo = ''
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			/**
			 * 点击图片放大或保存
			 */
			previewImg(index) {
				console.log(index);
				//准备一个装图片路径的  数组imgs
				let imgs = this.imgUrls.map(item => {
					//只返回图片路径
					return item.imgUrl
				})
				uni.previewImage({
					urls: imgs,
					current: index //点击图片传过来的下标
				})

			},


		}
	}
</script>
<style>
	@import "./mallDetail.css";

	.empty {
		height: 100%;
		width: 100%;

	}

	.empty .img-box {
		width: 388rpx;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.empty .img-box image {
		width: 100%;
	}

	.empty .text {
		text-align: center;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #ADB0AE;
	}

	.u-nav-slot {
		display: flex;
		flex-direction: row;
	}
</style>
